<section class="content container-fluid">
  <div class="card-header">
    <filter-list
      request="request"
      callback="loadCustomers(pageIndex)"
    ></filter-list>
  </div>
  <div class="card-body">
    <table
      class="table table-sm table-hover"
      cellspacing="0"
      ng-init="loadCustomers()"
    >
      <thead class="thead-light">
        <tr>
          <th scope="col" style="width: 15%">First Name</th>
          <th scope="col" style="width: 15%">Last Name</th>
          <th scope="col" style="width: 15%">Full Name</th>
          <th scope="col" style="width: 15%">Phone</th>
          <th scope="col" width="10%">DOB</th>
          <th scope="col" width="10%">Total Visit</th>
          <th scope="col" width="10%">Money</th>

          <th scope="col" style="width: 5%"></th>
        </tr>
      </thead>

      <tbody class="sortable" ng-repeat="item in data.items track by $index">
        <tr
          class="sortable-item"
          sort-model="customer"
          sort-model-id="{{item.id}}"
          data-bs-toggle="collapse"
          href="#collapse-page{{item.id}}-childs"
          role="button"
          aria-expanded="false"
          aria-controls="collapse-page{{item.id}}-childs"
        >
          <td>{{item.firstName}}</td>
          <td>{{item.lastName}}</td>

          <td>{{item.fullName}}</td>
          <td>
            <small> {{item.phoneNumber | phoneNumber }} </small>
          </td>
          <td>
            <small> {{item.birthday | utcToLocal:'dd.MM.yyyy'}} </small>
          </td>
          <td>{{item.total}}</td>
          <td>{{item.spent}}</td>
          <td>
            <div
              class="btn-group btn-group-sm btn-group-sm float-end"
              role="group"
              aria-label="Actions"
            >
              <a
                href="/portal/customer/details/{{item.id}}"
                class="btn btn-link"
              >
                <span class="fas fa-eye text-info"></span>
              </a>

              <a ng-click="removeCustomer(item.id);" class="btn btn-link">
                <span class="fas fa-trash-alt text-danger"></span>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="card-footer">
    <paging
      class="small"
      page="data.page"
      page-size="data.pageSize"
      total="data.totalItems"
      ul-class="pagination justify-content-end m-0"
      a-class="page-link"
      paging-action="loadCustomers(page-1)"
      scroll-top="true"
    ></paging>
  </div>
</section>
